<template>
  <div class="sign-in-wrapper">
    <h3 class="title">用户登录</h3>
    <p class="message">{{message}}</p>
    <el-form label-position="right" label-width="120px" >
      <keep-alive>
        <component :is="componentName" 
                   v-model:type="type" 
                   v-model:identifier="identifier">
        </component>
      </keep-alive>
      <el-form-item label="密码">
        <el-input type="password" v-model="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="signIn">登录</el-button>
      </el-form-item>
    </el-form>
    <el-radio-group v-model="componentName" label="label position">
      <el-radio-button label="account">账号</el-radio-button>
      <el-radio-button label="email">邮箱</el-radio-button>
      <el-radio-button label="tel">手机号</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElRadioButton,
  ElRadioGroup
} from 'element-plus';

export default {
  name: 'SignInView',
  data(){
    return {
      message: '',
      // 用来保存登录类型的属性
      type: '',
      // 登录时使用的标识符(可能是邮箱、账号、手机号)
      identifier: '',
      // 登录密码
      password: '',
      componentName: 'account'
    }
  },
  methods: {
    signIn(){
      console.log( this.type );
      console.log( this.identifier );
      console.log( this.password );
    }
  },
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElRadioButton,
    ElRadioGroup,
    'email' : {
      props:[ 'type', 'identifier' ],
      template: `<el-form-item label="邮箱">
                  <el-input v-model="email" @change="handler"/>
                 </el-form-item>`,
      data(){ return { email: '' } },
      methods: {
        handler(){
          // 触发自定义事件
          this.$emit( 'update:identifier' , this.email );
        }
      },
      // 生命周期钩子
      activated(){
        this.$emit( 'update:type' , 'email');
        this.$emit( 'update:identifier' , this.email );
        console.log( 'email activated' );
      },
      // 因为在 email 组件中使用了 ElementPlus 组件所以需要注册
      components: { ElFormItem , ElInput }
    },
    'account' : {
      template: `<el-form-item label="账号">
                  <el-input v-model="account" @change="handler"/>
                 </el-form-item>`,
      data(){ return { account: '' } },
      methods: {
        handler(){
          // 触发自定义事件
          this.$emit( 'update:identifier' , this.account );
        }
      },
      // 生命周期钩子
      activated(){
        this.$emit( 'update:type' , 'account');
        this.$emit( 'update:identifier' , this.account );
        console.log( 'account activated' );
      },
      components: { ElFormItem , ElInput }
    },
    'tel': {
      template: `<el-form-item label="手机号">
                  <el-input v-model="tel" @change="handler"/>
                 </el-form-item>`,
      data(){ return { tel: '' } },
      methods: {
        handler(){
          // 触发自定义事件
          this.$emit( 'update:identifier' , this.tel );
        }
      },
      // 生命周期钩子
      activated(){
        this.$emit( 'update:type' , 'tel');
        this.$emit( 'update:identifier' , this.tel );
        console.log( 'email activated' );
      },
      components: { ElFormItem , ElInput }
    }
  }
}
</script>

<style>
.sign-in-wrapper {
  height: 300px;
  background: #ffd;
}
</style>